<!-- 瀑布流布局 -->
<template>
	<view class="">
		
		<u-tabs :list="list1" :scrollable="false" @click="click"></u-tabs>
		
		
		<view class="container">
			<view :id="`cont_${index + 1}`" class="cont-box"
				:style="{ width: widthCalc, 'margin-left': index === 0 ? 0 : marginCalc }"
				v-for="(numVal, index) in flowData.column" :key="numVal">
				<view class="item-box" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j" @click.stop="topage(item)">
					<view class="pr">
						<image class="img-tip" :src="item.images[0]" mode="widthFix" lazy-load @load="imgLoad(item)"
							@error="imgError(item)" />
							
							<view class="pa add clamp">
								{{item.address}}
							</view>
					</view>
					<view class="tit-tip multi-line-omit">{{ item.title }}</view>
					<!-- <view class="desc-tip multi-line-omit">{{ item.desc }}</view> -->
					<view class="xflex-x-between ledt">
						<view class="left xflex-x">
							<image class="left-avatar" :src="item.user.avatar" mode=""></image>
							<view class="left-name">
								{{item.user.nickname}}
							</view>
						</view>
						<view class="xflex-x ">
							<view class="xflex-x xmr32">
								<image class="left-zan" v-if="item.zan == 1" src="/static/image/mine/shoucang.png" mode=""></image>
								<image class="left-zan" v-else  src="/static/image/mine/wshuchang.png" mode=""></image>
								<view class="left-zannum">
									{{item.like}}
								</view>
							</view>
						
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="nullshow" mode="center" :round="18">
			<view class="popup pr xflex-y-center xjc">
			
				<view class="popup-title xmt40">
					提示
				</view>
		
				<view class="popup-content xmt50">
					功能开发中
				</view>
				<view class="popup-btn" @click="nullshow = false">
					我知道了
				</view>
			</view>
		</u-popup>
		
		<image class="fx" src="/static/image/car/fx.png" @click.stop="topages('/pages/mine/dispatch/dispatch')" mode=""></image>
	</view>
	
	
	
	
</template>

<script setup>
	import {
		reactive,
		computed,
		getCurrentInstance,
		onMounted,
		ref
	} from "vue";
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {userarticle} from '/network/home.js'
	const _this = getCurrentInstance();
	const flowData = reactive({
		list: [], // 数据值
		column: 2, // 瀑布列数
		columnSpace: 2 ,// 瀑布列宽间距
		page:1,
		listshow:false
	});
	
	const list1 = reactive([  
	    { name: '骊客秀' },  
	    { name: '旅行美篇',disabled: true }, 
	]);  
	
	const topage = (item) =>{
		uni.navigateTo({
			url:'/pages/cart/detail?id=' + item.id
		})
	}
	
	const getusercollect = () =>{
		userarticle({
			page_no:flowData.page,
			page_size:10
		}).then(res=>{
			flowData.list.push(...res.data.lists)
			if(res.data.lists.length<10){
				flowData.listshow = true
			}
			console.log(flowData.list);
			initValue(0);
		})
	}
	
	const topages = (url) =>{
		uni.navigateTo({
			url:url
		})
	}
	
	getusercollect()
	
	let nullshow = ref(false)
	const click = (e) =>{
		console.log(e.name);
		if(e.name == "旅行美篇") {
			nullshow.value = true
			console.log(e);
		}
	}
	
	/* 数据赋值 */
	flowData.list = [];

	onReachBottom(() => {
		if(flowData.listshow){
			uni.showToast({
				icon:"none",
				title:'暂无更多'
			})
			return
		}
		flowData.page = flowData.page + 1
		getusercollect()

	})

	/* 初始化每一列的数据 */
	for (let i = 1; i <= flowData.column; i++) {
		flowData[`column_${i}`] = [];
	}
	/* 生命周期函数-实例被挂载后调用 */
	onMounted(() => {
		initValue(0);
	});
	/* 计算列宽 */
	const widthCalc = computed(() => {
		return `${100 / flowData.column - flowData.columnSpace}%`;
	});
	/* 计算 margin 外边距 */
	const marginCalc = computed(() => {
		const columnWidth = 100 / flowData.column - flowData.columnSpace;
		return `${(100 - columnWidth.toFixed(5) * flowData.column) / (flowData.column - 1)}%`;
	});
	/* 获取最小值的对象 */
	const getMinObj = (a, s) => {
		let m = a[0][s];
		let mo = a[0];
		for (let i = a.length - 1; i >= 0; i--) {
			if (a[i][s] < m) m = a[i][s];
		}
		mo = a.filter(i => i[s] === m);
		return mo[0];
	};
	/* 计算每列的高度 */
	function getMinColumnHeight() {
		return new Promise(resolve => {
			const heightArr = [];
			for (let i = 1; i <= flowData.column; i++) {
				uni
					.createSelectorQuery()
					.in(_this)
					.select(`#cont_${i}`)
					.boundingClientRect(res => {
						heightArr.push({
							column: i,
							height: res.height
						});
					})
					.exec(() => {
						if (flowData.column <= heightArr.length) {
							resolve(getMinObj(heightArr, "height"));
						}
					});
			}
		});
	}
	/* 初始化瀑布流数据 */
	async function initValue(i) {
		if (i >= flowData.list.length) return false;
		
		const minHeightRes = await getMinColumnHeight();
		flowData[`column_${minHeightRes.column}`].push({
			...flowData.list[i],
			index: i
		});
	}
	/* 图片加载完成 */
	function imgLoad(item) {
		const i = item.index;
		initValue(i + 1); // 加载下一条数据
	}
	/* 图片加载失败 */
	function imgError(item) {
		const i = item.index;
		initValue(i + 1); // 加载下一条数据
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;

		.cont-box {
			$borderRadius: 12rpx;
			float: left;

			.item-box {
				width: 100%;
				padding-bottom: 20rpx;
				margin-bottom: 30rpx;
				border-radius: $borderRadius;
				box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);

				.img-tip {
					width: 100%;
					border-radius: $borderRadius $borderRadius 0 0;
				}

				.tit-tip {
					text-align: justify;
					font-size: 30rpx;
					padding: 10rpx 20rpx 0;
					font-weight: 900;
				}

				.desc-tip {
					text-align: justify;
					font-size: 26rpx;
					padding: 5rpx 20rpx 0;
					margin-top: 10rpx;
				}
			}
		}
	}

	/* 多行省略 */
	.multi-line-omit {
		word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
		text-overflow: ellipsis; // 溢出用省略号显示
		overflow: hidden; // 超出的文本隐藏
		display: -webkit-box; // 作为弹性伸缩盒子模型显示
		-webkit-line-clamp: 2; // 显示的行
		-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
	}

	/* 单行省略 */
	.one-line-omit {
		width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
		white-space: nowrap; // 溢出不换行
		overflow: hidden; // 超出的文本隐藏
		text-overflow: ellipsis; // 溢出用省略号显示
	}
	.add {
		max-width:160rpx;
		// height: 40rpx;
		background: #00000050;
		border-radius: 6rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
		// line-height: 40rpx;
		left: 20rpx;
		bottom: 24rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}
	.left {
	
		&-icon {
			width: 44rpx;
			height: 44rpx;
			margin-right: 11rpx;
		}
		&-avatar {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
		}
		
		&-name {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
		}
		&-zan {
			width: 28rpx;
			height: 28rpx;
			margin-right: 7rpx;
		}
		&-zannum {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	}
	.ledt {
		margin-top: 42rpx;
	}
	.fx {
		position: fixed;
		width: 139rpx;
		height: 139rpx;
		right: 20rpx;
		bottom: 77rpx;
	}
	
	.popup {
		width: 600rpx;
		height: 370rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
	
		&-gb {
			width: 40rpx;
			height: 40rpx;
			top: 30rpx;
			right: 30rpx;
		}
	
		&-title {
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			text-align: center;
		}
	
		&-content {
			padding: 32rpx;
			width: 492rpx;
			height: 149rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}
		
		&-btn {
			width: 240rpx;
			height: 80rpx;
			background-color: rgb(211,42,58);
			border-radius: 20rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
		}
	}
	
	
</style>